<template>
  <div>
    <headNav title="我的班级" :backBySelf='true' @back='toBack'></headNav>
    <div class="flexHeight" >
      <div class="headDiv" >
        <div class="flexCenter" @click="$router.push('establish')" >
          <img src="@/assets/img/my/blueAdd.png" mode="" >
          <span>创建新班级</span>
        </div>
        <div class="flexCenter" @click="$router.push('joinClass')" >
          <img src="@/assets/img/my/blueJoin.png" mode="" >
          <span>加入新班级</span>
        </div>
        <!-- <div class="flexCenter" @click="setUpClick" >
          <img src="@/assets/img/my/blueSetUp.png" mode="" >
          <span style="color: #000; " >设置</span>
        </div> -->
      </div>
      <div class="bottomDivCss" v-for="(val, index) in classList" :key="index" @click="toClassDetail(val)">
        <div class="flexCenter identityDiv" >
          <span v-if="val.isChargeTeacher" >班主任</span>
          <span v-else >任课老师</span>
        </div>
        <div class="flexHeight" >
          <div style="display: flex; font-size: 0.32rem; margin: 0.45rem 0 0 0.3rem; " >
            <img src="@/assets/img/my/book.png" mode="" style="width: 0.58rem; height: 0.58rem; margin-right: 0.2rem;" >
            <span>{{val.gradeName}}{{val.name}}</span>
          </div>
          <div style="display: flex; font-size: 0.32rem; margin: 0.2rem 0 0 0.3rem; " >
            <div class="middle">班级号 <label class="classNumCss">{{val.qrCode}}</label>  </div>
           
            <div :data-clipboard-text="val.qrCode" @click.stop="copy(val.qrCode)" class="code middle" >复制</div>
            <button type="default" @click.stop="invitationClick(val, 1)" class="middle" >邀请教师</button>
            <button type="default" @click.stop="invitationClick(val, 2)" class="middle" style="margin-left: 0.2rem; background: #14CC8D;" >邀请家长</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 点击二维码弹窗 -->
     <!-- <x-dialog v-model="showHideOnBlur" class="dialog-demo xdialog" hide-on-blur>
      <div class="flexCenter" >
        <img :src="letFaGo" alt="" style="width: 100%;" >
      </div>
     </x-dialog> -->
     <!-- 设置按钮弹窗 -->
     <x-dialog v-model="showHideOnBlurs" class="dialog-demo" hide-on-blur>
      <div>
        <div class="flexHeight dialogTitle" >
          <span>家长审核设置</span>
        </div>
        <div class="establishCss" >
          <checklist title="" :options="commonList" v-model="demo1" :max="1" ></checklist>
        </div>
        <!-- <div class="flexHeight dialogTitle" >
          <span>班级对应学校码</span>
          <span class="tipsCss" >学校码仅可设置一次，请再三确认后保存</span>
        </div>
        <div class="flexCenter" style="margin-top: 0.3rem; " v-for="(val, index) in classNum" :key="index" >
          <span>{{val.name}}:</span>
          <span v-if="val.num" style="margin: 0 2.7rem 0 0.2rem;" >{{val.num}}</span>
          <input v-if="!val.num" type="text" value="" placeholder="请输入班级码" />
          <span v-if="!val.num" style="color: #128FEF;" >保存</span>
        </div> -->
        <button type="default" @click="change" >确定</button>
      </div>
     </x-dialog>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { getTrialClassApi, getQRcodeUserApi, getInviteTeachersApi, getSetUpApi, putSetUpTwoApi } from '@/api/myNewApi'
import Clipboard from 'clipboard'  // 移动端复制功能
import { XDialog, CheckIcon, Checklist } from 'vux'
export default {
  components: {
    headNav,
    XDialog,
    CheckIcon,
    Checklist
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      roleCode: state => state.user.roleCode,
      teacherId: state => state.user.teacherId
    })
  },
  data () {
    return {
      demo1: [2],
      classList: [],
      showHideOnBlur: false,  // 控制二维码弹窗
      showHideOnBlurs: false,  // 控制设置弹窗
      letFaGo: ''  ,   // 二维码
      classNum: [
        { id: 1, name: '四年级一班', num: 'SUVMCS' },
        { id: 2, name: '四年级二班', num: '' },
        { id: 3, name: '四年级三班', num: 'SKEW55' },
      ],
      commonList: [
        {key: 1, value: '全部申请均需审核'},
        {key: 2, value: '仅同名学生申请进行审核'}
      ],
    }
  },
  methods: {
    toBack () {
       this.$router.push('/myNew/myNew')
    },
    // 点击设置触发事件
    async setUpClick () {
      let res = await getSetUpApi()
      this.demo1 = [res.parentApprovalConfig + 1]
      this.showHideOnBlurs = true
    },
    // 设置  弹窗确定按钮触发事件
    async change () {
      let params = {
        parentApprovalConfig: this.demo1[0] - 1
      }
      await putSetUpTwoApi(params)
      let res = await getSetUpApi()
      this.demo1 = [res.parentApprovalConfig + 1]
      this.$vux.toast.text('设置成功', 'middle')
      this.showHideOnBlurs = false
    },
    // 邀请 按钮触发事件
    async invitationClick (e, num) {
      localStorage.shareClass = JSON.stringify(e)
      if (num == 1) {
        let val = await getInviteTeachersApi(e.qrCode)
        localStorage.pictureQRcode = JSON.stringify(val)
        console.log(val)
        localStorage.QRcodeNum = 1
      } else {
        let val = await getQRcodeUserApi(e.qrCode)
        localStorage.pictureQRcode = JSON.stringify(val)
        localStorage.QRcodeNum = 2
      }
      localStorage.numQRcode = e.qrCode
      this.$router.push('invitation')
    },
    // 复制按钮功能实现
    copy (qrCode) {
      
      // var clipboard = new Clipboard('.code')
      // clipboard.on('success', e => {
      //   console.log(e)
      //   this.$vux.toast.text('班级码复制成功', 'middle')
      //   clipboard.destroy()
      // })
      // clipboard.on('error', e => {
      //   // 不支持复制
      //   this.$vux.toast.text('复制失败', 'middle')
      //   clipboard.destroy()
      // })

      
        let oInput = document.createElement('input');
        oInput.value = qrCode;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        document.execCommand("Copy"); // 执行浏览器复制命令
          this.$vux.toast.text('班级码复制成功', 'middle')
        oInput.remove()

    },
    // 获取需审核班级封装
    async packTrialClass () {
      let list = []
      this.classList = []
      let res = await getTrialClassApi(this.teacherId)

      for (let i = 0; i < res.length; i++) {
        for (let j = 0; j < res[i].classes.length; j++) {
          list.push(res[i].classes[j])
        }
      }
      // isChargeTeacher
      for (let val of list) {
         this.classList.push(val)
      }
      console.log(this.classList)
    },
    toClassDetail (item) {
      this.$store.commit('myInfo/setCurClass', item)
      this.$router.push('classDetail')
    }
  },
  async mounted() {
      this.packTrialClass()
  }
}
</script>

<style lang="less" scoped >
 .tipsCss {
   color: #FF9900;
   font-size: 0.24rem;
   margin-top: 0.1rem;
 }

 .dialog-demo {
  button {
    width: 2.4rem;
    height: 0.75rem;
    background: #128FEF;
    color: #FFF;
    border: 0;
    border-radius: 0.4rem;
    margin: 0.6rem 0 0.3rem 0;
    font-size: 0.32rem;
  }
   input {
     width: 2.8rem;
     height: 0.7rem;
     background: #F6F6F6;
     margin: 0 0.2rem;
     padding-left: 0.2rem;
     font-size: 0.25rem;
   }
 }

 .establishCss {
   font-size: 0.3rem;
 }

 .dialogTitle {
   font-weight: 600;
   font-size: 0.32rem;
   margin: 0.3rem 0 0.1rem 0;
 }


 .identityDiv {
   width: 1.32rem;
   height: 0.42rem;
   border-radius: 0 0.15rem 0 0.15rem;
   background: #FFF3E2;
   position: absolute;
   right: 0;
   top: 0;
   font-size: 0.24rem;
   color: #FF9900;
 }

 .headDiv {
   display: flex;
   align-items: center;
   justify-content: space-around;
   width: 100%;
   height: 0.8rem;
   margin-top: 0.2rem;
   img {
     width: 0.4rem;
     margin-right: 0.1rem;
   }
   span {
     font-size: 0.28rem;
     color: #128FEF;
   }
 }

 .code {
   color: #128FEF;
   margin:0 0.1rem;
 }

 .bottomDivCss {
   width: 6.6rem;
   height: 2rem;
   background: #FFF;
   border-radius: 0.15rem;
   margin: 0.2rem 0.3rem;
   display: flex;
   position: relative;
   .textCss {
     display: flex;
     font-size: 0.3rem;
     margin-top: 0.5rem;
   }
   .textDiv {
     width: 5rem;
     height: 100%;
   }
   .imgDiv {
     width: 1.8rem;
     height: 100%;
   }
   img {
     width: 1.5rem;
   }
   button {
     width: 1.3rem;
     height: 0.5rem;
     font-size: 0.21rem;
     background: #128fef;
     color: #FFF;
     border-radius: 0.25rem;
     border: 0;
   }
 
   .classNumCss {
       font-size: 0.3rem;
       color: #FF9900;
       
     
     }
 }

.titleTextCss {
  margin: 0.3rem 0 0.2rem 0.4rem;
  font-size: 0.28rem;
  color: #666666;
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexHeight {
  display: flex;
  flex-direction: column;
}

.flexAlign {
  display: flex;
  align-items: center;
}

.flexEdge {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
<style>
.establishCss .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
  color: #128FEF!important;
}

.establishCss .weui-cell:before {
  border: none!important;
}

.establishCss .weui-cells:before {
  border: none!important;
}

.establishCss .weui-cells:after {
  border: none!important;
}

.establishCss .weui-cells_checkbox .weui-check:checked + .vux-checklist-icon-checked:before {
  color: #128FEF!important;
}
.weui-cell__bd {
  text-align: left;
}
.middle{
  display: inline-block; vertical-align: bottom;
}
</style>
